<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?=$product['title']?></title>
    <link href="<?=$path?>static/css/style.css" rel="stylesheet">
    <link href="<?=$path?>static/css/swiper.css" rel="stylesheet">
    <style type="text/css">
    body{background: #fff}
		.pro-container{width:100%;max-width: 720px;min-width: 320px;margin:0 auto;box-sizing: border-box;}
		.buy-selecte-header{top:0;height:110px;background:#fcfcfc;padding: 5px;position:fixed;left:0;right:0;}
    .buy-selecte-content{background-color: #fff;padding:110px 5px 60px 5px;}
    #product_thum{width:100px;height:100px;background-color:#eee;float: left;margin-right: 10px;background-size:contain;}
    #product_title{height: 40px;overflow: hidden;width:calc(100% - 110px);display: table;float: left}
    #product_title p{display: table-cell;vertical-align: middle;font-size: 14px;line-height: 20px}
    #total_price{color:red;font-size:18px;width:calc(100% - 110px);height:30px;line-height: 30px;float: left;margin:0;}
    #total_price span{float: right;font-size: 16px;color:#555;margin-right: 5px;line-height: 30px}
    #header_pro_tip{color:#333;font-size:14px;width:calc(100% - 110px);height:30px;line-height: 30px;float: left;margin:0;}
    
    #btn_buy{position: fixed;bottom:0;left:0;right:0;height:45px;font-size: 16px;color:#fff;background: red}

    label{font-size: 14px;font-weight: bold;}
  }
	</style>
  </head>
  <body>
  <div class="pro-container buy-selecte-header" id="product_header">
    <div id="product_thum"></div>
    <div id="product_title"><p><?=$product['title']?></p></div>
    <p id="header_pro_tip"><?=$product['buy_info']['attrs']?></p>
    <h3 id="total_price"><?=$product['buy_info']['price']?><span class="mui-icon mui-icon-closeempty">  <?=$product['buy_info']['count']?></span></h3>
  </div>
  
  <div class="pro-container buy-selecte-content">
  <p>请填写收货信息：</p>
<form class="">
    <div class="">
        <label>国家</label>
        <input type="text" class="mui-input-clear">
    </div>
    <div class="">
        <label>城市</label>
        <input type="text" class="mui-input-clear">
    </div>
    <div class="">
        <label>详细地址</label>
        <input type="text" class="mui-input-clear">
    </div>
    <div class="">
        <label>邮编</label>
        <input type="text" class="mui-input-clear">
    </div>
    <div class="">
        <label>手机号码</label>
        <input type="number" class="mui-input-clear">
    </div>
    <p><?=$product['tip']?></p>
    <button type="submit" id="btn_buy" class="pro-container mui-btn"><?=$tran['ok']?></button>
</form>
</div>
  
    <script src="<?=$path?>static/js/jquery-3.2.1.min.js"></script>
    <script src="<?=$path?>static/js/mui.min.js"></script>
    <script type="text/javascript">
      $(function(){
        var thumbs = <?=$product['img_banners']?>;
        $('#product_thum').css('background-image','url('+thumbs[0].path+')');
      })    	
    </script>
    
  </body>
</html>